body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #c0d1d8;
}

#calculator{
    --button-w:80px;
    --button-h:80px;
    
    display: grid;
    grid-template-areas: 
    "result result result result"
    "clear clear brackets divide"
    "number-7 number-8 number-9 mul"
    "number-4 number-5 number-6 sub"
    "number-1 number-2 number-3 add"
    "plus-minus number-0 dot equal" ;
    grid-template-columns: repeat(4,var(--button-w));
    grid-template-rows: repeat(6,var(--button-h));

    border-radius: 15px;
    padding: 25px;
    background: linear-gradient(225deg, #e6e5e5, #ffffff);
    box-shadow:  -3px 3px 13px #86888a, 
            3px -3px 13px #f4f8fa;
}

#calculator button{
    font-size: 28px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 8px;
    border-radius: 20px;
    background: linear-gradient(225deg, #e6e5e5, #ffffff);
    box-shadow:  -3px 3px 13px #86888a, 
            3px -3px 13px #f4f8fa;
    border: 0px;
    outline: none;
}

#calculator button:active{
    background:linear-gradient(225deg, #d8d8d8, #fafafa);
    box-shadow:  -3px 3px 13px #86888a, 
            3px -3px 13px #f4f8fa;
}

.result{
    text-align: right;
    line-height: 80px;
    font-size: 38px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 20px;
    border-radius: 20px;
    
}